<template>
  <div id="dictRight" v-loading = "loading" element-loading-text = "数据正在加载中"> 

    <template v-if="isSelect">
      <div class="top-div">
        <dict-table-top ref="childModelTop" @addDict="addDict" @selectDict="selectDict" />
      </div>

      <div class="center-div">
        <dict-table :tableDictData="tableDictData" @changeLoad="changeLoad" @editDict="editDict" @selectDict="selectDict"/>
      </div>

      <div class="bottom-div">
        <dict-table-bottom @tableDictDataFun="tableDictDataFun" @changeLoad="changeLoad" :selectParams = "selectParams" />
      </div>
    </template>

    <template v-else >
      <router-view />
    </template>
    
  </div>
</template>

<script>
import DictTable from './dictTable.vue'
import DictTableBottom from './dictTableBottom.vue'
import DictTableTop from './dictTableTop.vue'
export default {
  components: { DictTableTop, DictTable, DictTableBottom},
  name: "dictRight",
  data() {
    return {
      tableDictData: [],
      loading: true,
      isSelect: true,
      selectParams: {},
      query: {}
    }
  },
  methods: {
    tableDictDataFun(formData) {
      this.tableDictData = formData
    },
    changeLoad(load){
      this.loading = load
    },
    addDict() {
      this.isSelect = false
      this.$store.commit('cache/setQueryDict',false)
      this.$router.push({'name':"addDict", "params": {id:this.query.parentId}  })
    },
    editDict(row) {
      this.isSelect = false
      this.$store.commit('cache/setQueryDict',false)
      this.$router.push({'name':"modifyDict" , "params": row })
    },
    selectDict(params) {
      if(JSON.stringify(params) === '{}') {
        this.selectParams = JSON.parse(JSON.stringify(this.selectParams))
      } else {
        this.selectParams = JSON.parse(JSON.stringify(params))
      }
    },
    receiveParent(query) {
      this.query = query
      this.isSelect = true
      this.$nextTick(() => {
        // ref需要等待页面渲染完毕
			  this.$refs.childModelTop.receiveParentTop(this.query)
      })  
    }
  },
  mounted() {
    // 解决如果在新增用户、更新用户界面 刷新页面，导致页面渲染出错
    if(!this.$router.history.current.meta.isSelect) {
      this.$router.push({name:'dictManagement'})
    }
  },
  watch: {
    $route(to,from) {
      if(to.path === '/authority/dictManagement') { 
        this.isSelect = true
        this.$store.commit('cache/setQueryDict', false)
        this.$nextTick(() => {
          // ref需要等待页面渲染完毕
          this.$refs.childModelTop.receiveParentTop(this.query)
        })  
      }
    },
  },
}
</script>

<style lang="scss" scoped>

.top-div{
  display: inline-block;
}

.center-div {

}

.bottom-div {
  height: 5vh;
}

</style>